// 顶部bar条
import AvatarComponent from "./AvatarComponent";
import TopSideComponent from "./TopSideComponent";
import { useApp } from "@/pinia/modules/app";
import NavTagsComponent from "./NavTagsComponent";
export default defineComponent({
  name: "TopBarComponent",
  components: {
    ElHeader,
    AvatarComponent
  },
  setup() {
    const { toggleCollapse } = useApp(),
      { isCollapsed } = storeToRefs(useApp());

    const collapsedHandler = () => {
      toggleCollapse();
    };
    return () => (
      <el-header height="80px" class="shadow-md bg-color-[#fff]" style="padding: 0;">
        <div class="h-[50px] flex items-center border-b border-[#eee] pr-10px">
          <p class="w-[40px] pl-10px" onClick={collapsedHandler}>
            <el-link underline="never">
              <el-icon size="20px">
                {isCollapsed.value ? <expand /> : <fold />}
              </el-icon>
            </el-link>
          </p>
          <TopSideComponent />
          <AvatarComponent />
        </div>
        <NavTagsComponent />
      </el-header>
    );
  },
});
